<template>
  <el-table style="width: 100%" :data="orderList.results">
    <el-table-column type="expand">
      <template slot-scope="props">
        <el-form label-position="left" inline class="demo-table-expand">
          <el-form-item label="商品名称">
            <span>{{ props.row.products[0].product.name }}</span>
          </el-form-item>
          <el-form-item label="所属分类">
            <span>{{ props.row.products[0].product.category }}</span>
          </el-form-item>
          <el-form-item label="商品 描述">
            <span>{{ props.row.products[0].product.short_desc }}</span>
          </el-form-item>
          <el-form-item label="商品数量">
            <span>{{ props.row.products[0].product_num }}</span>
          </el-form-item>
          <el-form-item label="总金额">
            <span>{{ props.row.products[0].price }}</span>
          </el-form-item>
        </el-form>
      </template>
    </el-table-column>
    <el-table-column label="订单 ID" prop="id"> </el-table-column>
    <el-table-column label="订单号" prop="order_sn"> </el-table-column>
    <el-table-column label="创建用户" prop="user.username"> </el-table-column>
    <el-table-column label="创建时间" prop="created">
      <template slot-scope="scope">
        <!-- addtime 是接口的字段 -->
        <!-- | 管道符 -->
        <!-- 设置全局过滤器 名为dateChage -->
        {{ scope.row.created | dateChage }}
      </template>
    </el-table-column>
    <el-table-column label="订单状态" prop="desc">
      <template v-slot="{ row }">
        <span>{{ row.status == 7 ? "工作人员取消" : "已发货" }}</span>
      </template>
    </el-table-column>
    <el-table-column label="订单金额" prop="order_total">
      <template v-slot="{ row }">
        <span>{{
          row.order_total == null ? "￥" + "0.00" : "￥" + row.order_total
        }}</span>
      </template>
    </el-table-column>
    <el-table-column label="操作" prop="desc">
      <template v-slot="{ row }">
        <el-link type="primary" @click="change(row)">{{
          row.status == 7 ? "发货" : "取消订单"
        }}</el-link>
      </template>
    </el-table-column>
  </el-table>
</template>

<style scoped lang="scss">
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>

<script>
import { mapState, mapActions } from "vuex";
export default {
  name: "OrderList",
  computed: {
    ...mapState("orderlist", ["orderList"]),
  },
  methods: {
    ...mapActions("orderlist", ["getOrderlist"]),
    change(row) {
      // console.log(!row);
      if (!row) {
        row.status = 7;
        row.is_delete = true;
      } else {
        row.status = 3;
        row.is_delete = false;
      }
      // !rwo ? (row.status = 7) : (row.status = 3);
      // console.log($event);
    },
  },
  created() {
    this.getOrderlist();
  },
  data() {
    return {};
  },
};
</script>
<style lang="scss" scoped>
.el-table {
  overflow: scroll;
  height: 580px;
}
// ::-webkit-scrollbar {
//   width: 4px;
//   height: 3px;
// }
// ::-webkit-scrollbar-track {
//   border-radius: 3px; /*滚动条的背景区域的圆角*/
// }
// ::-webkit-scrollbar-thumb {
//   border-radius: 3px; /*滚动条的圆角*/
//   background-color: #ccc; /*滚动条的背景颜色*/
// }

// ::-webkit-scrollbar-thumb:hover {
//   background-color: #bbb;
// }

// ::-webkit-scrollbar-thumb:active {
//   cursor: pointer;
// }
</style>
